<template>
  <base-panel>
    <template #header>
      <h3>上网电量</h3>
    </template>
    <div class="station-list">
      <div class="station-info">
        <div class="station-name">小浪底</div>
        <div class="power-data">
          <div class="data-row">
            <span class="label">年上网/计划上网电量</span>
            <span class="value">7.92 / 58.32 <span class="unit">亿千瓦时</span></span>
          </div>
        </div>
      </div>
      <div class="station-info">
        <div class="station-name">西霞院</div>
        <div class="power-data">
          <div class="data-row">
            <span class="label">年上网/计划上网电量</span>
            <span class="value">0.79 / 4.68 <span class="unit">亿千瓦时</span></span>
          </div>
        </div>
      </div>
    </div>
  </base-panel>
</template>

<script setup lang="ts">
import BasePanel from '@/components/BasePanel.vue'
</script>

<style lang="scss" scoped>
.station-list {
  .station-info {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .station-name {
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      margin-bottom: 8px;
    }
    
    .power-data {
      .data-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .label {
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
        }
        
        .value {
          color: #3f9eff;
          font-size: 14px;
          font-weight: 500;
          
          .unit {
            font-size: 12px;
            margin-left: 2px;
          }
        }
      }
    }
  }
}
</style> 